<template>
  <PanelLayout>
    <div class="two-cell">
      <div class="title">送端换流站功率占比</div>
      <div class="list-wrap">
        <PieChart :options="pieOptions" />
      </div>
    </div>
  </PanelLayout>
</template>

<script setup name="SevenCell">
import { ref } from 'vue'
import PanelLayout from '@/views/index/PanelLayout.vue'
import { randomLenNum } from '@/utils/index.js'
import useAppStore from '@/store/modules/app'
import { getZyFhglSdhlzb } from '@/api/base.js'
import PieChart from '@/components/Charts/PieChart.vue'

const appStore = useAppStore()

const pieOptions = ref({})

const list = ref([])

const init = () => {
  // 模拟接口获取数据
  const time = appStore.timePoint

  getZyFhglSdhlzb({ time: time }).then(res => {
    if (res.code == '0000') {
      pieOptions.value = res.data.pieOptions
    }
  })
  // pieOptions.value = {
  //   title: '送端换流站功率占比',
  //   label: '送端换流站功率占比',
  //   total: 70,
  //   data: [
  //     { name: '送端换流站1有功', value: 23 },
  //     { name: '送端换流站2有功', value: 27 },
  //     { name: '送端换流站3有功', value: 20 }
  //   ]
  // }
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
.two-cell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  .title {
    font-size: 18px;
    height: 16px;
  }
  .list-wrap {
    width: 100%;
    flex: 1;
    position: relative;
  }
}
</style>
